
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>简易的系统管理后台</title>

    <link rel="stylesheet" type="text/css" href="js/layui/css/layui.css" />
    <link rel="stylesheet" type="text/css" href="css/main.css" />
    <script type="application/javascript" src="https://lib.baomitu.com/jquery/3.4.1/jquery.min.js"></script>
    <script type="application/javascript" th:src="js/my-ajax.js"></script>
    <script type="application/javascript" src="js/layui/layui.all.js"></script>
</head>
<style>
    .main-center{
        height: 90%;
    }
</style>
<body class="layui-layout-body no-select">
<div class="layui-layout layui-layout-admin">
    <div class="layui-header">
        <!-- 头部区域 -->
        <ul class="layui-nav layui-layout-left">
            <li class="layui-nav-item layadmin-flexible" lay-unselect="">
                <a href="javascript:;" layadmin-event="flexible" title="侧边伸缩">
                    <i class="layui-icon layui-icon-shrink-right" id="LAY_app_flexible"></i>
                </a>
            </li>
            <!--<li class="layui-nav-item layui-this layui-hide-xs layui-hide-sm layui-show-md-inline-block">
              <a lay-href="" title="">
                控制台
              </a>
            </li>-->
            <li class="layui-nav-item layui-hide-xs" lay-unselect="">
                <a href="#" target="_blank" title="前台">
                    <i class="layui-icon layui-icon-website"></i>
                </a>
            </li>
            <li class="layui-nav-item" lay-unselect="">
                <a href="javascript:;" layadmin-event="refresh" title="刷新">
                    <i class="layui-icon layui-icon-refresh-3"></i>
                </a>
            </li>
            <li class="layui-nav-item layui-hide-xs" lay-unselect="">
                <input type="text" placeholder="搜索..." autocomplete="off" class="layui-input layui-input-search" layadmin-event="serach" lay-action="template/search/keywords=">
            </li>
            <span class="layui-nav-bar" style="left: 206px; top: 48px; width: 0px; opacity: 0;"></span></ul>
        <ul class="layui-nav layui-layout-right" lay-filter="layadmin-layout-right">

            <li class="layui-nav-item" lay-unselect="">
                <a lay-href="app/message/" layadmin-event="message">
                    <i class="layui-icon layui-icon-notice"></i>

                    <!-- 如果有新消息，则显示小圆点 -->
                    <script type="text/html" template="" lay-url="./json/message/new.js">
                        {{# if(d.data.newmsg){ }}
                        <span class="layui-badge-dot"></span>
                        {{# } }}
                    </script>  <span class="layui-badge-dot"></span>

                </a>
            </li>
            <li class="layui-nav-item layui-hide-xs" lay-unselect="">
                <a href="javascript:;" layadmin-event="theme">
                    <i class="layui-icon layui-icon-theme"></i>
                </a>
            </li>
            <li class="layui-nav-item layui-hide-xs" lay-unselect="">
                <a href="javascript:;" layadmin-event="note">
                    <i class="layui-icon layui-icon-note"></i>
                </a>
            </li>
            <li class="layui-nav-item layui-hide-xs" lay-unselect="">
                <a href="javascript:;" layadmin-event="fullscreen">
                    <i class="layui-icon layui-icon-screen-full"></i>
                </a>
            </li>
            <li class="layui-nav-item" lay-unselect="">
                <script type="text/html" template="" lay-url="./json/user/session.js" lay-done="layui.element.render('nav', 'layadmin-layout-right');">
                    <a href="javascript:;">
                        <cite>{{ d.data.username }}</cite>
                    </a>
                    <dl class="layui-nav-child">
                        <dd><a lay-href="set/user/info">基本资料</a></dd>
                        <dd><a lay-href="set/user/password">修改密码</a></dd>
                        <hr>
                        <dd layadmin-event="logout" style="text-align: center;"><a>退出</a></dd>
                    </dl>
                </script> <a href="javascript:;"> <cite>贤心</cite> <span class="layui-nav-more"></span></a> <dl class="layui-nav-child layui-anim layui-anim-upbit"> <dd><a lay-href="set/user/info">基本资料</a></dd> <dd><a lay-href="set/user/password">修改密码</a></dd> <hr> <dd layadmin-event="logout" style="text-align: center;"><a>退出</a></dd> </dl>
            </li>

            <li class="layui-nav-item layui-hide-xs" lay-unselect="">
                <a href="javascript:;" layadmin-event="about"><i class="layui-icon layui-icon-more-vertical"></i></a>
            </li>
            <li class="layui-nav-item layui-show-xs-inline-block layui-hide-sm" lay-unselect="">
                <a href="javascript:;" layadmin-event="more"><i class="layui-icon layui-icon-more-vertical"></i></a>
            </li>
            <span class="layui-nav-bar" style="left: 0px; top: 48px; width: 0px; opacity: 0;"></span></ul>
    </div>

    <div class="layui-side layui-side-menu">
        <div class="layui-side-scroll">
            <div class="layui-logo" lay-href="">
                <span>layuiAdmin Pro</span>
            </div>
            <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
            <ul id="left-menu" class="layui-nav layui-nav-tree height-100">
            </ul>
        </div>
    </div>

    <div class="layui-body layui-bg-gray">
        <!--<div class="layui-tab" lay-allowClose="true">-->
            <!--<ul class="layui-tab-title">-->
                <!--<li class="layui-this">网站设置</li>-->
                <!--<li>用户基本管理</li>-->
                <!--<li>权限分配</li>-->
                <!--<li>全部历史商品管理文字长一点试试</li>-->
                <!--<li>订单管理</li>-->
            <!--</ul>-->
            <!--<div class="layui-tab-content">-->
                <!--<div class="layui-tab-item layui-show">1</div>-->
                <!--<div class="layui-tab-item">2</div>-->
                <!--<div class="layui-tab-item">3</div>-->
                <!--<div class="layui-tab-item">4</div>-->
                <!--<div class="layui-tab-item">5</div>-->
                <!--<div class="layui-tab-item">6</div>-->
            <!--</div>-->
        <!--</div>-->
        <!-- 内容主体区域 -->
        <div class="layui-card layadmin-header">
            <div class="layui-breadcrumb" lay-filter="breadcrumb" style="visibility: visible;">
                <a lay-href="#">首页</a><span lay-separator="">/</span>
                <a><cite>主页一</cite></a>
            </div>
        </div>
        <div class="main-center padding-sm">
            <div class="layui-card height-100">
                <div id="page-title" class="layui-card-header"></div>
                <div id="page-center" class="layui-card-body">

                </div>
            </div>
        </div>
    </div>

    <div class="layui-footer center">
        <!-- 底部固定区域 -->
        © 2019 - layui
    </div>
</div>
<script>
    /**
     *  注意事项 只能运行在服务容器中 例如 tomcat，node，nginx（推荐）
     *
     *  使用说明 ：
     *  内置按钮响应事件 class分别是 addEvent updateEvent deleteEvent
     *  其中如需模态框 那么只需要加上属性 modal="模态框内容的div的选择器"
     *  例如：
        <div id="carousel_add" class="hide">
           <div class="layui-form padding-form">
               <div class="layui-form-item">
                  <label class="layui-form-label">名称</label>
                  <div class="layui-input-block">
                    <input type="text" name="title" required  lay-verify="required" placeholder="请输入名称" autocomplete="off" class="layui-input">
                  </div>
               </div>
               <div class="layui-form-item">
                 <div class="layui-input-block input-foot">
                     <button class="layui-btn" lay-submit lay-filter="add">立即提交</button>
                     <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                 </div>
                </div>
           </div>
        </div>
     *
     *  内置生命周期
     *  // 打开模态框后回调方法
     *  function modalInit();
     *  // 模态框关闭后回调方法
     *  function modalClose();
     *  // 页面加载完成回调方法
     *  function load();
     *  //
     *
     *  内置方法
     *  // 文件上传方法
     *  fileUpload(文件上传按钮选择器, 可选值有：images（图片）、file（所有文件）、video（视频）、audio（音频）, 上传成功后的回调方法)
     *  // 打开模态框
     *  modal(title, elem, "该按钮选择器 用于复原模态框")
     *  // 从url 中获取参数
     *  getUrlParam(name)
     *
     *  内置常量 (可能会用到的)
     *  // 基础项目url
     *  basePath
     *  // 菜单配置对象
     *  menuJson
     *  // 文件上传配置对象
     *  uploadConfig
     *  // layui 中的组件
     *  flow // 瀑布流
     *  form // 表单
     *  upload // 文件上传
     *  ....
     *
     *
     *
     **/
     //JavaScript代码区域
    // 常量区 ===================
    const basePath = "/" + location.pathname.split("/")[1] + "/";
    // 简单配置 只实现二级菜单
    const menuJson = [
        {
            name: "首页配置",
            childrenList: [
                {
                    "name": "轮播管理",
                    "pierce_value": "", // 透传值
                    "page": "pages/helloword.html"
                }
            ]
        },
        {
            name: "图片管理",
            page: "pages/image.html"
        }
    ]
    const localStorageKey = {
        activityPage: "activity-page",
        activityBtn: "activity-btn"
    }
    const uploadConfig = {
        "image": {
            name: "图片",
            url: basePath + "file/image/upload",
            allow: ["jpeg", "jpg", "png"]
        },
    }
    const flow = layui.flow;
    const form = layui.form;
    const upload = layui.upload;

    console.log(basePath)

    function getUrlParam(name){
        let reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
        let temp = window.location.href.split("?");
        if(temp.length < 2) return null;
        let r = (temp[1]).match(reg);
        if(r!=null)return  unescape(r[2]);
        return null;
    }

    // 初始化菜单 简易实现 只支持2级菜单
    !function initMenu(){
        $("#left-menu").empty();
        $.each(menuJson, (index, item)=>{
            console.log("index", index, "item", item)
            let menu = $('<li class="layui-nav-item layui-nav-itemed"></li>')

            if(item.childrenList && item.childrenList.length > 0){
                menu.append(`<a href="javascript:;">${item.name}</a>`)
                let childrenList = $('<dl class="layui-nav-child"></dl>')
                $.each(item.childrenList, (index, item) => {
                    childrenList.append(`<dd><a href="javascript:;" data-page="${item.page}" data-value="${item.pierce_value}">${item.name}</a></dd>`)
                });
                menu.append(childrenList);
            }else{
                menu.append(`<a href="javascript:;" data-page="${item.page}" data-value="${item.pierce_value}">${item.name}</a>`)
            }
            $("#left-menu").append(menu);
        })
        let page = localStorage.getItem(localStorageKey.activityPage)
        // 自动复原页面
        setTimeout(function () {
            if(page)
                $("a[data-page='"+page+"']").click();
        }, 200);
    }()

    $("#left-menu").on("click", "a", function(){
        let pierce_value = $(this).data("pierce_value");
        let page = $(this).data("page");
        let title = $(this).text();
        console.log("page", page, "pierce_value", pierce_value)
        if(!page || page === 'undefined')
            return;
        let url = basePath + `jump/admin?page=${page}&v=${new Date().getTime()}`
        console.log("即将跳转  url", url)
        layer.load();
        $("#page-title").text(title)
        localStorage.setItem(localStorageKey.activityPage, page)
        $("#page-center").load(url, ()=> {
            layer.closeAll();
            typeof(load) === 'function' ? load() : doNothing()
            let btn = localStorage.getItem(localStorageKey.activityBtn);
            console.log("准备复原 btn", btn)
            $(btn).click()
        })
    })

    // 事件响应 start
    $("body").on("click", ".addEvent", function(){
        modal("新增", $(this).attr("modal"), ".addEvent");
    });

    $("body").on("click", ".updateEvent", function(){
        modal("修改", $(this).attr("modal"), ".updateEvent");
    });

    $("body").on("click", ".deleteEvent", function(){

    });

    /**
     * 文件上传
     * @param elem 文件上传按钮选择器
     * @param fileType 可选值有：images（图片）、file（所有文件）、video（视频）、audio（音频）
     * @param callBack 上传成功后的回调方法
     */
    function fileUpload(elem, fileType, callBack){
        let type = fileType;
        let acceptMime = [];
        console.log('elem', elem, "fileType", fileType)
        if(!uploadConfig[type]){
            console.error("文件类型错误")
            return;
        }
        $.each(uploadConfig[type].allow, function(index, value){
            acceptMime.push(type + "/" + value)
        })
        let defObj = {
            elem: elem,
            url: uploadConfig[type].url,
            accept: type,
            acceptMime: acceptMime.join(","),
            exts: uploadConfig[type].allow.join("|"),
            done: function(res, index, upload){
                layer.msg(uploadConfig[type].name + "上传成功")
                if(callBack)
                    callBack(res, index, upload)
            },
            error: function(){
                layer.msg("网络异常")
            }
        }
        upload.render(defObj)
    }

    // 事件响应 end

    let openIndex;
    function modal(title, elem, btn){
        if(openIndex)
            layer.close(openIndex);
        localStorage.setItem(localStorageKey.activityBtn, btn)
        console.log("宽度", $(elem).width(), "高度", $(elem).height())
        openIndex = layer.open({
            type: 1,
            title: title,
            area: [$(elem).width() + 100, $(elem).height() + 30],
            skin: 'layui-layer-black', //样式类名
            closeBtn: true,
            end:()=>{
                localStorage.removeItem(localStorageKey.activityBtn);
                typeof(modalClose) === 'function' ? modalClose() : doNothing()
            },
            // anim: 2,
            success: function(){
                typeof(modalInit) === 'function' ? modalInit(btn) : doNothing()
            },
            content: $(elem)[0].outerHTML.replace("class=\"hide\"", "")
        });
    }

    function doNothing(){

    }
</script>

</body>
</html>
